
<template>
  <div class="box_top">
    <div class="box_t_l">
      <slot name="left"></slot>
    </div>
    <div class="box_t_c">
      <slot name="center"></slot>
    </div>
    <div class="box_t_r">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  components: {},

  computed: {},

  mounted () {},

  methods: {}
}

</script>
<style lang='less' scoped>
.box_top{
    position: fixed;
    top: 0;
    z-index: 9;
    width: 100%;
    background: #fff;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    border-bottom: 1px solid #ddd;
    box-shadow: 10px 0px 10px  #ddd;
    .box_t_l{
      width: 20%;
      img{
        width: 30%;
      }
    }
    .box_t_c{
      color: #558ff6;
      width: 60%;
      font-size: 18px;
      text-align: center;
    }
    .box_t_r{
      width: 20%;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
    }
}
</style>